<script setup lang="ts">
// import { Toast } from 'vant'
import { showToast } from 'vant'
import { loginByPasswordApi, loginByCodeApi, getCodeApi } from '@/services/user'
import { ref, onBeforeUnmount } from 'vue'
import { useUserStore } from '@/stores/index'
import { useRoute, useRouter } from 'vue-router'
import type { passwordLoginParams } from '@/types/user'
const form = ref<passwordLoginParams>({
  password: 'abc12345',
  mobile: '13230000100'
})
const code = ref<passwordLoginParams>({
  mobile: '13230000100',
  code: ''
})
const choose = ref(false)
const isPassword = ref(true)
const isIcon = ref(true)
const store = useUserStore()
const route = useRoute()
const router = useRouter()
//校验规则
const mobileRules = [
  { required: true, message: '请输入手机号' },
  { pattern: /^1[3-9]\d{9}$/, message: '手机号格式不正确' }
]

const passwordRules = [
  { required: true, message: '请输入密码' },
  { pattern: /^\w{8,24}$/, message: '密码需8-24个字符' }
]
//发送验证码
const time = ref(0)
const timer = ref()
const sendCode = async () => {
  await getCodeApi({ mobile: code.value.mobile, type: 'login' })
  //60s的一个间歇定时器
  time.value = 60
  timer.value = setInterval(() => {
    time.value--
    if (time.value === 0) {
      clearInterval(timer.value)
    }
  }, 1000)
}
const loginByPassword = async () => {
  const res = await loginByPasswordApi(form.value)
  store.setUser(res.data)
  router.replace((route.query.callback as string) || '/')
}
const loginBycode = async () => {
  const res = await loginByCodeApi(code.value)
  store.setUser(res.data)
  router.replace((route.query.callback as string) || '/')
}
const onSubmit = async (data:any) => {
  console.log('submit', data)
  if (!choose.value) {
    return showToast('请勾选我已同意')
  }
  // eslint-disable-next-line @typescript-eslint/no-unused-expressions
  isPassword.value? loginByPassword() : loginBycode()
}
onBeforeUnmount(() => {
  // eslint-disable-next-line @typescript-eslint/no-unused-expressions
  timer.value && clearInterval(timer.value)
})
</script>

<template>
  <div class="login">
    <cpNavBar rigthtText="注册" />

    <!--  -->
    <div style="margin: 20px">
      <div class="login-title" v-if="isPassword">
        <div style="font-size: 30px">密码登录</div>
        <div style="font-size: 13px" @click="isPassword = !isPassword">短信验证码登录></div>
      </div>
      <div class="login-title" v-else>
        <div style="font-size: 30px">短信验证码登录</div>
        <div style="font-size: 13px" @click="isPassword = !isPassword">密码登录></div>
      </div>
    </div>
    <!-- 表单 -->
    <van-form @submit="onSubmit">
      <van-field placeholder="请输入手机号" v-model="form.mobile" :rules="mobileRules" />
      <van-field
        v-if="isPassword"
        :type="isIcon ? 'password' : 'text'"
        placeholder="请输入密码"
        v-model="form.password"
        :rules="passwordRules"
      >
        <template #right-icon>
          <van-icon
            v-if="isIcon"
            name="eye-o"
            style="width: 16px; height: 16px"
            @click="isIcon = !isIcon"
          ></van-icon>
          <van-icon
            v-else
            name="closed-eye"
            style="width: 16px; height: 16px"
            @click="isIcon = !isIcon"
          ></van-icon>
          <!-- <van-icon name="chat-o" /> -->
        </template>
      </van-field>
      <van-field
        v-else
        type="password"
        placeholder="请输入短信验证码"
        v-model="code.code"
        :rules="[
          { required: true, message: '请填写密码' },
          { pattern: /^\w{6}$/, message: '验证码为6位' }
        ]"
        ><template #button
          ><span style="color: var(--cp-primary)" @click="sendCode">{{
            time > 0 ? `还剩${time}秒` : '发送验证码'
          }}</span>
        </template></van-field
      >
      <van-checkbox v-model="choose" icon-size="16px">我已同意用户协议及隐私条款</van-checkbox>
      <div style="margin: 16px">
        <van-button round block type="primary" native-type="submit"> 登录 </van-button>
      </div>
    </van-form>
  </div>
</template>

<style lang="scss" scoped>
.login {
  padding: 0 20px;
}
.login-title {
  display: flex;
  justify-content: space-between;
  align-items: center;
}
</style>
